<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="手机号">
        <el-input v-model="search.phone" placeholder="手机号" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="search.name" placeholder="姓名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-card v-for="(item, index) in list" :key="index" class="box-card">
        <el-image style="width: 150px; height: 150px" :src="baseUrl+'files/'+item.image" fit="contain">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <table>
          <tr>
            <td width="130">{{ item.name }}</td>
            <td width="75">{{ item.sex }}</td>
            <td width="75">{{ item.age }}岁</td>
          </tr>
          <tr>
            <td>
              <span v-for="(type, i) in setType(item.userType)" :key="i">{{ type }}</span>
            </td>
            <td colspan="2">{{ item.phone }}</td>
          </tr>
          <tr>
            <td colspan="3">擅长：{{ item.beGoodAt }}</td>
          </tr>
          <tr>
            <td colspan="3">
              <el-button type="primary" size="mini" round>查看详情</el-button>
              <el-button type="warning" size="mini" round>禁用</el-button>
            </td>

          </tr>
        </table>

      </el-card>
    </div>
    <el-pagination
      background
      :page-size="search.pageSize"
      layout="prev, pager, next"
      :total="total"
      :current-page="search.pageIndex"
      :hide-on-single-page="true"
      @current-change="handleSearch"
    />
  </div>
</template>
<script>
import { getList } from '@/api/user'
export default {
  data() {
    return {
      search: {
        phone: null,
        name: null,
        pageIndex: 1,
        pageSize: 8,
        type: 1
      },
      total: 0,
      baseUrl: process.env.VUE_APP_BASE_API,
      list: []
    }
  },
  methods: {
    handleSearch(index) { // 查询
      this.search.pageIndex = index
      getList(this.search).then(res => {
        this.list = res.data.users
        this.total = res.data.total
      })
    },
    setType(typeid) {
      const id = typeid.toString()
      const name = []
      if (id.length === 1) {
        if (typeid === 1) { name.push('雇员') } else name.push('雇主')
      } else {
        if (id.charAt(0) === '2') { name.push('雇员') }
        if (id.charAt(1) === '2') name.push('雇员')
      }
      return name
    }
  }
}
</script>

<style scoped>
.box-card{
  width:260px;
  display: inline-block;
  margin: 5px;
  padding: 2px;
  text-align: center;
}
td{
  text-align: center;
  border:1px solid #EBEEF5
}
</style>
